<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>测试录屏并下载</h1>
<video id="video" width="500" height="300">

</video>
<script type="text/javascript">
    // interface MediaRecorderOptions {
    //     audioBitsPerSecond?: number;
    //     bitsPerSecond?: number;
    //     mimeType?: string;
    //     videoBitsPerSecond?: number;
    // }
    const options = {
        mimeType: "video/webm;codecs=vp8"
    }
    const tracks = []
    navigator.mediaDevices.getDisplayMedia().then(stream=>{
        start(stream)
    })
    let mediaRecorder
    function start(stream) {
        mediaRecorder = new MediaRecorder(stream, options)
        mediaRecorder.ondataavailable = ev => {
            if(ev.data.size>0) {
                tracks.push(ev.data)
            }
            console.log(ev.data)
        }
        mediaRecorder.onstop = ev => {
            const video = document.getElementById("video")
            console.log(tracks)
            const blob = new Blob(tracks, {type: "video/webm"})
            console.log(blob)
            video.src = window.URL.createObjectURL(blob)
            video.srcObject = null;
            video.controls = true
            video.play()
            save(blob)
        }
        mediaRecorder.start()
        console.log("开始录制")
        setTimeout(stop, 10000)
    }
    function stop() {
        console.log(name)
        mediaRecorder.stop()
        console.log("录制结束")
    }
    function save(blob) {
        let a = document.createElement("a")
        a.href = window.URL.createObjectURL(blob)
        a.download = new Date().toString()
        a.style.display = "none"
        document.body.appendChild(a)
        a.click()
        document.body.removeChild(a)
        window.URL.revokeObjectURL(a.href)
    }
</script>
</body>
</html>